import { useContext } from 'react'
import { Form, Input, Select, Modal } from 'antd'
import CounterContext1 from './ExampleList1.context.js'
import axios from 'axios'

const ListItemModal = () => {
	const [form] = Form.useForm();
	const { isModalVisible, setIsModalVisible, sexOptions, activeItemData, searchList } = useContext(CounterContext1);

	const handleOk = () => {
		form.validateFields().then((values) => {
			form.resetFields();
			var formData = new FormData();
			formData.append('primaryId', activeItemData.primaryId);
			formData.append('userId', values.userId);
			formData.append('userName', values.userName);
			formData.append('nickName', values.nickName);
			formData.append('sex', values.sex);
			editUserItem(formData);
		}).catch((info) => {
			console.log('Validate Failed:', info);
		});
	};

	// 编辑
	const editUserItem = async (params) => {
		await axios.get('/moddata/user/editUserItem.json', params);
		handleCancel();
		searchList();
	};

	const handleCancel = () => {
		setIsModalVisible(false);
	};

	//form.resetFields(activeItemData);

  return (
    <div>
		<Modal title="编辑" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消">
			<Form
				name="basic"
				form={form}
				labelCol={{ span: 4 }}
				wrapperCol={{ span: 20 }}
				initialValues={{
					userId: activeItemData.userId,
					userName: activeItemData.userName,
					nickName: activeItemData.nickName,
					sex: activeItemData.sex,
				}}>
				<Form.Item
					label="用户编号"
					rules={[{ required: true, message: '用户编号不能为空!' }]}
					name="userId">
					<Input />
				</Form.Item>
				<Form.Item
					label="用户名"
					rules={[{ required: true, message: '用户名不能为空!' }]}
					name="userName">
					<Input />
				</Form.Item>
				<Form.Item
					label="昵称"
					name="nickName">
					<Input />
				</Form.Item>
				<Form.Item
					label="性别"
					name="sex">
					<Select style={{ width: '100%' }}>
						{sexOptions}
					</Select>
				</Form.Item>
			</Form>
		</Modal>
    </div>
  );
};

export default ListItemModal;